const utils=(function(){
    let getStyle=function(o,attr){
        if(o.currentStyle){
            return o.currentStyle[attr];
        }
        else{
            return window.getComputedStyle(o,null)[attr];
        }
    }
    
    let aniamte=(oEle,json,callback)=>{
        clearInterval(oEle.timer);
        oEle.timer=setInterval(()=>{
            let flag=true;
            let current=0;
            let target=0;
            for(let attr in json){
                if(attr==="opacity"){
                    target=parseFloat(json[attr])*100;
                    current=parseFloat(getStyle(oEle,attr))*100;
                }else{
                    target=parseInt(json[attr]);
                    current=parseInt(getStyle(oEle,attr));
                }
                let steps=(target-current)/10;
                steps=steps>0?Math.ceil(steps):Math.floor(steps);
                if(attr==="opacity"){
                oEle.style[attr]=(current+steps)/100;
                }else if(attr==="zIndex"){
                    oEle.style[attr]=target;
                }
                else{
                    oEle.style[attr]=current+steps+"px";
                }
                if(current!=target){
                    flag=false;
                }
            }
            if(flag){
                clearInterval(oEle.timer);
                if(typeof(callback==="function")){
                    callback();
                }
            }
        },20)
    }
    return {
        getStyle,
        aniamte
    }
})()
